<template>
  <div class="detail">
    <!-- <h1>查看任务</h1> -->
    <div class="descriptions">
      <table>
        <tr>
          <td><span class="label">任务年份：</span><span>{{ detilList.preAssessTaskEntity.taskYear }}</span></td>
          <td><span class="label">任务编码：</span><span>{{ detilList.preAssessTaskEntity.taskNum }}</span></td>
        </tr>
        <tr>
          <td><span class="label">任务名称：</span><span>{{ detilList.preAssessTaskEntity.taskName }}</span></td>
          <td><span class="label">面积（平方公里）：</span><span>{{ detilList.preAssessTaskEntity.taskArea }}</span></td>
        </tr>
        <tr v-if="detilList.memberlist != ''">
          <td><span class="label">承担小组：</span><span>{{ detilList.preAssessTaskEntity.groupName }}</span></td>
          <td><span class="label">小组组长：</span><span>{{ detilList.preAssessTaskEntity.groupLeader }}</span></td>
        </tr>
        <tr v-if="detilList.memberlist != ''">
          <td><span class="label">小组成员：</span><span>{{ getGroupName(detilList.memberlist) }}</span></td>
          <td><span class="label">专家成员：</span><span>{{ getGroupName(detilList.expertlist) }}</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">任务区域：</span><span class="init-taskDivSpan"
              v-if="detilList.preAssessTaskEntity.taskRegion != undefined">{{
                detilList.preAssessTaskEntity.taskRegion.substr(0, 358) }}...</span></td>
        </tr>
        <tr>
          <td colspan="2"><span class="label">任务地区：</span><span
              class="init-taskDivSpan">{{ detilList.preAssessTaskEntity.taskDistrict }}</span></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script setup>
import { getGroupName } from "@/utils/group.js";
const props = defineProps({
  detilList: {
    default: {},
    type: Object,
  },
});

const { detilList } = toRefs(props);
console.log(detilList);
</script>

<style lang="scss" scoped>
.detail {
  width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;

  h1 {
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    color: rgb(16, 124, 229);
  }

  .descriptions {
    td {
      width: 400px;
    }

    .label {
      text-align: right;
      display: inline-block;
      color: #606266;
      font-weight: 700;
      height: 32px;
      width: 140px;
      padding-right: 14px;
    }
  }
}</style>